{% extends "base.html" %}
            {% block control %}<li class="treeview active">{% endblock %}
          {% block domain %}
                <li class="active"><a href="/domain/"><i class="fa fa-genderless"></i>域名配置管理</a></li>
             {% endblock %}
      <!-- Content Wrapper. Contains page content -->
             {% block content %}

          <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-television"></i> 管理中心</a></li>
            <li><a href="/domain">域名列表</a></li>
            <li class="active">{{ node.node_name }}</li><!-- 记得改-->
          </ol>

        <!-- Main content -->
         <section class="content">
             <form class="form-horizontal" id="myModal" tabindex="-1" role="dialog"
                   aria-labelledby="myModalLabel" aria-hidden="true"  method="post">
                    {% csrf_token %}
                   <div class="modal-dialog">
                      <div class="modal-content">
                         <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">
                               CDN设置
                            </h4>
                         </div>
                         <div class=" box-body">
                          <div class="form-group">
                              <div class="col-sm-2 control-label">
                               回源Host:</div>
                                 <div class="col-sm-10">
                                     {{ form.source_type }}
                                  </div>
                              </div>
                             <div class="form-group">
                              <div class="col-sm-2 control-label">
                               回源方式:</div>
                              <div class="col-sm-10">
                                    {{ form.source_line }}
                                     </div>
                                 </div>
                                <div class="form-group">
                              <div class="col-sm-2 control-label">
                               源站线路:</div>
                                  <div class="col-sm-10">
                                     <form action="" method="get">
                                        <label><input name="line" type="checkbox" value="tel" id="line0"/>电信 </label>
                                        <label><input name="line" type="checkbox"  value="mo" id="line1"/>移动 </label>
                                        <label><input name="line" type="checkbox" value="cnc" id="line2"/>联通 </label>
                                        <label><input name="line" type="checkbox"  value="BGP" id="line3"/>BGP </label>
                                     </form>
                                  </div> <!-----估计要写个js判断 这个要用checkbox。不能用下拉--------->
                         </div>
                             <div id="div0">电信
                                 <div class="box-body">
                <form class="form-horizontal" method="post">
                    {% csrf_token %}
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>回源地址</th>
                        <th>端口号</th>
                        <th>线路属性</th>
                        <th>轮询权重</th>
                        <th>最大失败次数</th>
                        <th>静默时间（秒）</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </form>
                </div><!-- /.box-body -->
                             </div>
                             <div id="div1">移动                                <div class="box-body">
                <form class="form-horizontal" method="post">
                    {% csrf_token %}
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>回源地址</th>
                        <th>端口号</th>
                        <th>线路属性</th>
                        <th>轮询权重</th>
                        <th>最大失败次数</th>
                        <th>静默时间（秒）</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </form>
                </div><!-- /.box-body --></div>
                             <div id="div2">联通                                <div class="box-body">
                <form class="form-horizontal" method="post">
                    {% csrf_token %}
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>回源地址</th>
                        <th>端口号</th>
                        <th>线路属性</th>
                        <th>轮询权重</th>
                        <th>最大失败次数</th>
                        <th>静默时间（秒）</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </form>
                </div><!-- /.box-body --></div>
                             <div id="div3">BGP                                <div class="box-body">
                <form class="form-horizontal" method="post">
                    {% csrf_token %}
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>回源地址</th>
                        <th>端口号</th>
                        <th>线路属性</th>
                        <th>轮询权重</th>
                        <th>最大失败次数</th>
                        <th>静默时间（秒）</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </form>
                </div><!-- /.box-body --></div>
                         <div class="modal-footer">
                            <a href="/domain/"><button type="button" class="btn btn-default">关闭</button></a>
                            <button type="submit" class="btn btn-primary">
                               添加
                            </button>
                         </div>
                      </div><!--box-body -->
                </div><!-- modal-content -->
                    </div>
             </form>

        </section><!-- /.content -->
    {% endblock %}

  {% block js %}
    {% load staticfiles %}

      <script>
      document.getElementById("div0").style.display="none"
      document.getElementById("div1").style.display="none"
      document.getElementById("div2").style.display="none"
      document.getElementById("div3").style.display="none"

            document.getElementById('line0').onclick =function(){
          if(this.checked){
           document.getElementById('div0').style.display="block"//选中后需要执行的方法
}  else{
      document.getElementById('div0').style.display="none"//未选中事件
  }
}

                  document.getElementById('line1').onclick =function(){
          if(this.checked){
           document.getElementById('div1').style.display="block"//选中后需要执行的方法
}  else{
      document.getElementById('div1').style.display="none"//未选中事件
  }
}
            document.getElementById('line2').onclick =function(){
          if(this.checked){
           document.getElementById('div2').style.display="block"//选中后需要执行的方法
}  else{
      document.getElementById('div2').style.display="none"//未选中事件
  }
}

                  document.getElementById('line3').onclick =function(){
          if(this.checked){
           document.getElementById('div3').style.display="block"//选中后需要执行的方法
}  else{
      document.getElementById('div3').style.display="none"//未选中事件
  }
}
      </script>
  {% endblock %}
